<template>
  <template v-if="route.name !== 'startExam'">
    <var-bottom-navigation v-model:active="active" @change="handleChange">
      <var-bottom-navigation-item label="首页" icon="home" name="exam" />
      <var-bottom-navigation-item label="我的" icon="account-circle" name="user" />
    </var-bottom-navigation>
  </template>
</template>

<script setup lang="ts">
  let active = ref('exam');
  const router = useRouter();
  const handleChange = () => {
    router.push({ name: active.value });
  };
  const route = useRoute();
  watch(
    () => route.name,
    () => {
      if (['exam', 'user'].includes(route.name as string)) {
        active.value = route.name as string;
      }
    },
    {
      immediate: true,
    }
  );
</script>
